<template>
    <div class="global">
    
         
        <div class="table">
            <el-table :data="tableData" stripe>
                <el-table-column type="index" width="100" label="序号" align="center" sortable></el-table-column>


                <el-table-column prop="nickName" label="用户信息">

                </el-table-column>

             

                <el-table-column label="邮箱" align="center" prop="email">
                
              
                </el-table-column>
             
                <el-table-column label="注册时间" align="center" prop="joinTime">
                </el-table-column>

                <el-table-column label="最后登录时间" align="center" prop="lastLoginTime"></el-table-column>
                <el-table-column label="状态" align="center" prop="status">
                    <template #default="scope">
                        <el-tag>{{scope.row.status == 1?'正常':'禁用'}}</el-tag>
                    </template>
                </el-table-column>


                <el-table-column label="操作" align="center" width="300" fixed="right">
                    <template v-slot="scope">

                        <el-button size="mini" v-if="scope.row.status == 1" type="danger" plain @click="del(scope.row.userId,0,'封禁')">封禁</el-button>
                        <el-button size="mini" v-if="scope.row.status == 0" type="danger" plain @click="del(scope.row.userId,1,'解开')">解开</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination" style="margin-top: 10px;display: flex;justify-content: right;">
                <el-pagination background @current-change="handleCurrentChange" :current-page="queryform.pageNo"
                    :page-sizes="[5, 10, 20]" :page-size="queryform.pageSize" layout=" prev, pager, next"
                    :total="total">
                </el-pagination>
            </div>
        </div>


    </div>
</template>
<script setup>
import { ElMessageBox } from "element-plus";
import { onMounted, ref } from "vue";
import service from "../utils/request";

const queryform = ref({

    pageNo: 1
});
const tableData = ref([])
const total = ref(0)
const handleCurrentChange = (e) => {
    queryform.value.pageNo = e;
    getlist()
}
onMounted(() => {
    getlist()
})
const search = () => {
    queryform.value.pageNo = 1;
    getlist()
}
const research = () => {
    queryform.value = {}
    queryform.value.pageNo = 1;
    getlist()
}
const del = (id,e,f) => {
    ElMessageBox.confirm(
        `是否确认${f}？`,
        '确认信息',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await service.get("/admin/disableuser", {
                params: {
                    userId: id,
                    status:e
                }
            })
            if (res.code == 1) {

                getlist()
            }

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}
const getlist = async () => {
    const res = await service.get("/admin/userlist", {
        params: queryform.value
    })
    console.log(res)
    tableData.value = res.data.records
    total.value = res.data.total
}

</script>
<style scoped>
.global {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
}
</style>